<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>首页-青灯论坛</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/wangEditor/style.css">
</head>
<body>

<form class="layui-form" action="" lay-filter="edit-filter">
    <div class="layui-form-item layui-hide">
        <label class="layui-form-label">文章ID：</label>
        <div class="layui-input-block">
            <input type="text" name="id"
                   required lay-verify="required"
                   placeholder="请输入文章标题"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章标题：</label>
        <div class="layui-input-block">
            <input type="text" name="title"
                   required lay-verify="required"
                   placeholder="请输入文章标题"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章分类：</label>
        <div class="layui-input-inline">
            <select name="category_id" lay-verify="required">
                <option value="">请选择分类</option>
                <option value="2">股市</option>
                <option value="3">债市</option>
                <option value="4">商品</option>
                <option value="5">外汇</option>
                <option value="6">公司</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">摘要：</label>
        <div class="layui-input-block">
            <textarea name="digest" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        {#上传文章首页图片#}
        <label class="layui-form-label">上传图像：</label>
        <div class="layui-input-block">
            <button type="button"
                    class="layui-btn layui-btn-danger"
                    id="ID-upload-demo-size">
                <i class="layui-icon layui-icon-upload"></i> 上传图片
            </button>
            {#隐藏的图片标签，才是负责真实的图片上传#}
            <input type="text" name="index_image_url" class="layui-input" style="display: none">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="rich_content">内容：</label>
        <div class="layui-input-block">
            {# 2. 提供 editor 的容器 #}
            <div id="editor—wrapper" style="min-height: 600px;border: 1px solid darkgrey">
                <div id="toolbar-container"><!-- 工具栏 --></div>
                <div id="editor-container"><!-- 编辑器 --></div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="0" title="审核通过">
            <input type="radio" name="status" value="1" title="审核中">
            <input type="radio" name="status" value="-1" title="未通过">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原因</label>
        <div class="layui-input-block">
            <textarea name="reason" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="/static/layui/layui.js"></script>
<script src="/static/js/main.js"></script>
<script src="/static/js/api.js"></script>
{#1. 引入 wangEditor js#}
<script src="/static/wangEditor/index.js"></script>
<script>
  const {createEditor, createToolbar} = window.wangEditor;

  const editorConfig = {
    placeholder: '请输入文章内容...',
    MENU_CONF: {},
  };

  editorConfig.MENU_CONF['uploadImage'] = {
    // 上传图片的配置
    server: '/my/article_upload',
    headers: {'X-CSRF-TOKEN': getCookie('csrf_access_token')},
  };

  const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>', // html
    config: editorConfig,
    mode: 'default', // or 'simple'
  });

  const toolbarConfig = {};

  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
  });

  layui.use(function() {
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var upload = layui.upload;
    let sp = new URLSearchParams(location.search);
    let aid = sp.get('aid');
    api_get(`/api/v1/article/${aid}`).then(function(ret) {
      console.log(ret);
      if (!ret.code) {
        // 请求成功
        {#layer.msg(ret.message, {icon: 1});#}
        form.val('edit-filter', ret.data);
        editor.setHtml(ret.data.content);
      } else {
        layer.msg(ret.message, {icon: 2});
      }
    });

    // 渲染
    upload.render({
      elem: '#ID-upload-demo-size',
      url: '/my/article_index_image', // 此处配置你自己的上传接口即可
      size: 500, // 限制文件大小，单位 KB
      headers: {'X-CSRF-TOKEN': getCookie('csrf_access_token')},
      done: function(res) {
        console.log(res);
        $('[name="index_image_url"]').val(res.article_index_image_url);
      },
    });
    // 监听提交
    form.on('submit(formDemo)', function(data) {
      let article_content = editor.getHtml();
      let send_data = data.field;
      send_data['content'] = article_content;

      api_put(`/api/v1/article/${data.field.id}`, send_data).then(function(ret) {
        if (!ret.code) {
          layer.msg(ret.message, {icon: 1});
          parent.layer.closeAll('iframe');
          parent.refresh();
        } else {
          layer.msg(ret.message, {icon: 2});
        }
      });

      return false;
    });
  });
</script>
</body>
</html>